<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3774014" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">arrow-left-3</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">arrow-right-3</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">z550</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec7f;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xec7f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">Date</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">cate</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">message</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f2;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe7f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">empty</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83f;</span>
                <div class="name">delete-bin-3-line</div>
                <div class="code-name">&amp;#xe83f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe840;</span>
                <div class="name">delete-bin-4-line</div>
                <div class="code-name">&amp;#xe840;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe841;</span>
                <div class="name">delete-bin-line</div>
                <div class="code-name">&amp;#xe841;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">空</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ec;</span>
                <div class="name">key-line</div>
                <div class="code-name">&amp;#xe7ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83e;</span>
                <div class="name">lock-2-line</div>
                <div class="code-name">&amp;#xe83e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef25;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xef25;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xef26;</span>
                <div class="name">arrow-down-copy</div>
                <div class="code-name">&amp;#xef26;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe731;</span>
                <div class="name">goto-top</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">search-sm</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">emoji</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">search close</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75e;</span>
                <div class="name">htb－Arrow right02</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75f;</span>
                <div class="name">search close</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86e;</span>
                <div class="name">htb－Arrow right02</div>
                <div class="code-name">&amp;#xe86e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe870;</span>
                <div class="name">htb－Arrow right02</div>
                <div class="code-name">&amp;#xe870;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74e;</span>
                <div class="name">router-fill</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">rss-line</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe750;</span>
                <div class="name">save-3-fill</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe752;</span>
                <div class="name">signal-wifi-error-line</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe755;</span>
                <div class="name">tablet-line</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe756;</span>
                <div class="name">tv-2-line</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe757;</span>
                <div class="name">u-disk-line</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe758;</span>
                <div class="name">tv-line</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe759;</span>
                <div class="name">uninstall-line</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75a;</span>
                <div class="name">usb-line</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75b;</span>
                <div class="name">wifi-line</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75c;</span>
                <div class="name">wifi-off-line</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe765;</span>
                <div class="name">file-chart-line</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
                <div class="name">file-line</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe776;</span>
                <div class="name">file-text-line</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77a;</span>
                <div class="name">file-word-line</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78c;</span>
                <div class="name">numbers-fill</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78d;</span>
                <div class="name">numbers-line</div>
                <div class="code-name">&amp;#xe78d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78e;</span>
                <div class="name">sticky-note-2-line</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78f;</span>
                <div class="name">survey-line</div>
                <div class="code-name">&amp;#xe78f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe790;</span>
                <div class="name">todo-line</div>
                <div class="code-name">&amp;#xe790;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe792;</span>
                <div class="name">attachment-2</div>
                <div class="code-name">&amp;#xe792;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79e;</span>
                <div class="name">number-2</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79f;</span>
                <div class="name">number-0</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">number-4</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a1;</span>
                <div class="name">number-6</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a2;</span>
                <div class="name">number-7</div>
                <div class="code-name">&amp;#xe7a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a3;</span>
                <div class="name">number-3</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">number-8</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a5;</span>
                <div class="name">number-5</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a6;</span>
                <div class="name">number-9</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a7;</span>
                <div class="name">organization-chart</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a8;</span>
                <div class="name">number-1</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a9;</span>
                <div class="name">question-mark</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7aa;</span>
                <div class="name">send-backward</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ab;</span>
                <div class="name">rounded-corner</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ac;</span>
                <div class="name">translate</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">24-hours-line</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">hand-heart-line</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">hand-coin-line</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b4;</span>
                <div class="name">price-tag-3-line</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bb;</span>
                <div class="name">vip-fill</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bc;</span>
                <div class="name">vip-line</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bd;</span>
                <div class="name">capsule-line</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7be;</span>
                <div class="name">flask-line</div>
                <div class="code-name">&amp;#xe7be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bf;</span>
                <div class="name">heart-fill</div>
                <div class="code-name">&amp;#xe7bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c0;</span>
                <div class="name">heart-line</div>
                <div class="code-name">&amp;#xe7c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c1;</span>
                <div class="name">heart-2-line</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c2;</span>
                <div class="name">hearts-line</div>
                <div class="code-name">&amp;#xe7c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c4;</span>
                <div class="name">surgical-mask-line</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c6;</span>
                <div class="name">test-tube-line</div>
                <div class="code-name">&amp;#xe7c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c8;</span>
                <div class="name">baidu-fill</div>
                <div class="code-name">&amp;#xe7c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c9;</span>
                <div class="name">chrome-fill</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ca;</span>
                <div class="name">baidu-line</div>
                <div class="code-name">&amp;#xe7ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cd;</span>
                <div class="name">drive-line</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d9;</span>
                <div class="name">qq-fill</div>
                <div class="code-name">&amp;#xe7d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7da;</span>
                <div class="name">qq-line</div>
                <div class="code-name">&amp;#xe7da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e2;</span>
                <div class="name">vuejs-line</div>
                <div class="code-name">&amp;#xe7e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e3;</span>
                <div class="name">vuejs-fill</div>
                <div class="code-name">&amp;#xe7e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e4;</span>
                <div class="name">weibo-line</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e5;</span>
                <div class="name">weibo-fill</div>
                <div class="code-name">&amp;#xe7e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e6;</span>
                <div class="name">wechat-fill</div>
                <div class="code-name">&amp;#xe7e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e7;</span>
                <div class="name">wechat-line</div>
                <div class="code-name">&amp;#xe7e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e8;</span>
                <div class="name">zhihu-fill</div>
                <div class="code-name">&amp;#xe7e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e9;</span>
                <div class="name">wechat-2-line</div>
                <div class="code-name">&amp;#xe7e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ea;</span>
                <div class="name">compass-4-line</div>
                <div class="code-name">&amp;#xe7ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7eb;</span>
                <div class="name">charging-pile-fill</div>
                <div class="code-name">&amp;#xe7eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ed;</span>
                <div class="name">map-pin-2-fill</div>
                <div class="code-name">&amp;#xe7ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ee;</span>
                <div class="name">map-pin-3-line</div>
                <div class="code-name">&amp;#xe7ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ef;</span>
                <div class="name">lifebuoy-line</div>
                <div class="code-name">&amp;#xe7ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f0;</span>
                <div class="name">map-pin-2-line</div>
                <div class="code-name">&amp;#xe7f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f1;</span>
                <div class="name">map-pin-line</div>
                <div class="code-name">&amp;#xe7f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f4;</span>
                <div class="name">route-fill</div>
                <div class="code-name">&amp;#xe7f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f7;</span>
                <div class="name">takeaway-line</div>
                <div class="code-name">&amp;#xe7f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fb;</span>
                <div class="name">walk-line</div>
                <div class="code-name">&amp;#xe7fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fd;</span>
                <div class="name">album-line</div>
                <div class="code-name">&amp;#xe7fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fe;</span>
                <div class="name">broadcast-fill</div>
                <div class="code-name">&amp;#xe7fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ff;</span>
                <div class="name">broadcast-line</div>
                <div class="code-name">&amp;#xe7ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe801;</span>
                <div class="name">dv-fill</div>
                <div class="code-name">&amp;#xe801;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe802;</span>
                <div class="name">film-fill</div>
                <div class="code-name">&amp;#xe802;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe803;</span>
                <div class="name">film-line</div>
                <div class="code-name">&amp;#xe803;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe804;</span>
                <div class="name">hd-fill</div>
                <div class="code-name">&amp;#xe804;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe807;</span>
                <div class="name">image-line</div>
                <div class="code-name">&amp;#xe807;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe808;</span>
                <div class="name">landscape-fill</div>
                <div class="code-name">&amp;#xe808;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe809;</span>
                <div class="name">landscape-line</div>
                <div class="code-name">&amp;#xe809;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80a;</span>
                <div class="name">movie-2-line</div>
                <div class="code-name">&amp;#xe80a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80b;</span>
                <div class="name">movie-line</div>
                <div class="code-name">&amp;#xe80b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80c;</span>
                <div class="name">movie-fill</div>
                <div class="code-name">&amp;#xe80c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80d;</span>
                <div class="name">pause-mini-fill</div>
                <div class="code-name">&amp;#xe80d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80e;</span>
                <div class="name">mic-2-line</div>
                <div class="code-name">&amp;#xe80e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80f;</span>
                <div class="name">picture-in-picture-line</div>
                <div class="code-name">&amp;#xe80f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe810;</span>
                <div class="name">play-circle-line</div>
                <div class="code-name">&amp;#xe810;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe811;</span>
                <div class="name">play-fill</div>
                <div class="code-name">&amp;#xe811;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe813;</span>
                <div class="name">play-mini-line</div>
                <div class="code-name">&amp;#xe813;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe815;</span>
                <div class="name">repeat-2-line</div>
                <div class="code-name">&amp;#xe815;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe816;</span>
                <div class="name">rewind-fill</div>
                <div class="code-name">&amp;#xe816;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe817;</span>
                <div class="name">repeat-one-line</div>
                <div class="code-name">&amp;#xe817;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe818;</span>
                <div class="name">rewind-line</div>
                <div class="code-name">&amp;#xe818;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe819;</span>
                <div class="name">rewind-mini-fill</div>
                <div class="code-name">&amp;#xe819;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81a;</span>
                <div class="name">rhythm-fill</div>
                <div class="code-name">&amp;#xe81a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81b;</span>
                <div class="name">speaker-2-line</div>
                <div class="code-name">&amp;#xe81b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81c;</span>
                <div class="name">speaker-3-line</div>
                <div class="code-name">&amp;#xe81c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81d;</span>
                <div class="name">speed-mini-fill</div>
                <div class="code-name">&amp;#xe81d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81e;</span>
                <div class="name">speed-mini-line</div>
                <div class="code-name">&amp;#xe81e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81f;</span>
                <div class="name">speed-line</div>
                <div class="code-name">&amp;#xe81f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe820;</span>
                <div class="name">stop-circle-fill</div>
                <div class="code-name">&amp;#xe820;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe821;</span>
                <div class="name">stop-circle-line</div>
                <div class="code-name">&amp;#xe821;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe822;</span>
                <div class="name">stop-fill</div>
                <div class="code-name">&amp;#xe822;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe823;</span>
                <div class="name">stop-line</div>
                <div class="code-name">&amp;#xe823;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe824;</span>
                <div class="name">stop-mini-line</div>
                <div class="code-name">&amp;#xe824;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe825;</span>
                <div class="name">stop-mini-fill</div>
                <div class="code-name">&amp;#xe825;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe826;</span>
                <div class="name">video-fill</div>
                <div class="code-name">&amp;#xe826;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe827;</span>
                <div class="name">video-line</div>
                <div class="code-name">&amp;#xe827;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe828;</span>
                <div class="name">vidicon-fill</div>
                <div class="code-name">&amp;#xe828;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe829;</span>
                <div class="name">vidicon-line</div>
                <div class="code-name">&amp;#xe829;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82a;</span>
                <div class="name">volume-down-line</div>
                <div class="code-name">&amp;#xe82a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82b;</span>
                <div class="name">volume-mute-line</div>
                <div class="code-name">&amp;#xe82b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82c;</span>
                <div class="name">volume-up-line</div>
                <div class="code-name">&amp;#xe82c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82e;</span>
                <div class="name">leaf-line</div>
                <div class="code-name">&amp;#xe82e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82d;</span>
                <div class="name">leaf-fill</div>
                <div class="code-name">&amp;#xe82d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82f;</span>
                <div class="name">lightbulb-flash-line</div>
                <div class="code-name">&amp;#xe82f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe830;</span>
                <div class="name">lightbulb-line</div>
                <div class="code-name">&amp;#xe830;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe831;</span>
                <div class="name">plant-line</div>
                <div class="code-name">&amp;#xe831;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe832;</span>
                <div class="name">fridge-line</div>
                <div class="code-name">&amp;#xe832;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe833;</span>
                <div class="name">plug-2-line</div>
                <div class="code-name">&amp;#xe833;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe835;</span>
                <div class="name">reserved-line</div>
                <div class="code-name">&amp;#xe835;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe836;</span>
                <div class="name">seedling-fill</div>
                <div class="code-name">&amp;#xe836;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe837;</span>
                <div class="name">seedling-line</div>
                <div class="code-name">&amp;#xe837;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe838;</span>
                <div class="name">recycle-line</div>
                <div class="code-name">&amp;#xe838;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe839;</span>
                <div class="name">add-line</div>
                <div class="code-name">&amp;#xe839;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83a;</span>
                <div class="name">alert-line</div>
                <div class="code-name">&amp;#xe83a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83b;</span>
                <div class="name">alarm-warning-line</div>
                <div class="code-name">&amp;#xe83b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83c;</span>
                <div class="name">apps-2-line</div>
                <div class="code-name">&amp;#xe83c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83d;</span>
                <div class="name">apps-line</div>
                <div class="code-name">&amp;#xe83d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe847;</span>
                <div class="name">check-double-line</div>
                <div class="code-name">&amp;#xe847;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe848;</span>
                <div class="name">check-line</div>
                <div class="code-name">&amp;#xe848;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe853;</span>
                <div class="name">error-warning-line</div>
                <div class="code-name">&amp;#xe853;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe854;</span>
                <div class="name">external-link-fill</div>
                <div class="code-name">&amp;#xe854;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe855;</span>
                <div class="name">eye-line</div>
                <div class="code-name">&amp;#xe855;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe856;</span>
                <div class="name">eye-close-line</div>
                <div class="code-name">&amp;#xe856;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86f;</span>
                <div class="name">settings-4-line</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe874;</span>
                <div class="name">share-forward-line</div>
                <div class="code-name">&amp;#xe874;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe875;</span>
                <div class="name">share-line</div>
                <div class="code-name">&amp;#xe875;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe877;</span>
                <div class="name">shield-flash-line</div>
                <div class="code-name">&amp;#xe877;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe878;</span>
                <div class="name">shield-line</div>
                <div class="code-name">&amp;#xe878;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe879;</span>
                <div class="name">shield-star-line</div>
                <div class="code-name">&amp;#xe879;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87a;</span>
                <div class="name">star-fill</div>
                <div class="code-name">&amp;#xe87a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87b;</span>
                <div class="name">star-line</div>
                <div class="code-name">&amp;#xe87b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87c;</span>
                <div class="name">spam-line</div>
                <div class="code-name">&amp;#xe87c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87d;</span>
                <div class="name">time-line</div>
                <div class="code-name">&amp;#xe87d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87e;</span>
                <div class="name">timer-2-line</div>
                <div class="code-name">&amp;#xe87e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87f;</span>
                <div class="name">timer-flash-line</div>
                <div class="code-name">&amp;#xe87f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe880;</span>
                <div class="name">toggle-line</div>
                <div class="code-name">&amp;#xe880;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe888;</span>
                <div class="name">user-3-line</div>
                <div class="code-name">&amp;#xe888;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe895;</span>
                <div class="name">blaze-line</div>
                <div class="code-name">&amp;#xe895;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe896;</span>
                <div class="name">celsius-fill</div>
                <div class="code-name">&amp;#xe896;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe897;</span>
                <div class="name">cloudy-2-line</div>
                <div class="code-name">&amp;#xe897;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe898;</span>
                <div class="name">cloudy-line</div>
                <div class="code-name">&amp;#xe898;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe899;</span>
                <div class="name">drizzle-line</div>
                <div class="code-name">&amp;#xe899;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89a;</span>
                <div class="name">fire-line</div>
                <div class="code-name">&amp;#xe89a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89b;</span>
                <div class="name">foggy-fill</div>
                <div class="code-name">&amp;#xe89b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89c;</span>
                <div class="name">hail-line</div>
                <div class="code-name">&amp;#xe89c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89d;</span>
                <div class="name">foggy-line</div>
                <div class="code-name">&amp;#xe89d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89e;</span>
                <div class="name">haze-line</div>
                <div class="code-name">&amp;#xe89e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89f;</span>
                <div class="name">heavy-showers-line</div>
                <div class="code-name">&amp;#xe89f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a0;</span>
                <div class="name">mist-fill</div>
                <div class="code-name">&amp;#xe8a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a1;</span>
                <div class="name">moon-clear-line</div>
                <div class="code-name">&amp;#xe8a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a2;</span>
                <div class="name">moon-cloudy-line</div>
                <div class="code-name">&amp;#xe8a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a3;</span>
                <div class="name">moon-foggy-line</div>
                <div class="code-name">&amp;#xe8a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a4;</span>
                <div class="name">rainy-line</div>
                <div class="code-name">&amp;#xe8a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a5;</span>
                <div class="name">rainbow-line</div>
                <div class="code-name">&amp;#xe8a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a6;</span>
                <div class="name">showers-line</div>
                <div class="code-name">&amp;#xe8a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a7;</span>
                <div class="name">moon-line</div>
                <div class="code-name">&amp;#xe8a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a8;</span>
                <div class="name">snowy-line</div>
                <div class="code-name">&amp;#xe8a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a9;</span>
                <div class="name">sun-cloudy-line</div>
                <div class="code-name">&amp;#xe8a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8aa;</span>
                <div class="name">sun-foggy-line</div>
                <div class="code-name">&amp;#xe8aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ab;</span>
                <div class="name">sun-line</div>
                <div class="code-name">&amp;#xe8ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ac;</span>
                <div class="name">temp-cold-line</div>
                <div class="code-name">&amp;#xe8ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">temp-hot-line</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ae;</span>
                <div class="name">thunderstorms-line</div>
                <div class="code-name">&amp;#xe8ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8af;</span>
                <div class="name">typhoon-line</div>
                <div class="code-name">&amp;#xe8af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b0;</span>
                <div class="name">windy-fill</div>
                <div class="code-name">&amp;#xe8b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b1;</span>
                <div class="name">meteor-line</div>
                <div class="code-name">&amp;#xe8b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">bangsi</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">building-2-line</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">home-2-line</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">archive-drawer-fill</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">bubble-chart-line</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">customer-service-line</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">flag-2-line</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">line-chart-line</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">pie-chart-2-line</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">send-plane-fill</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">message-3-line</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe704;</span>
                <div class="name">collage-line</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">drag-drop-line</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70e;</span>
                <div class="name">grid-line</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">hammer-line</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
                <div class="name">grid-fill</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">layout-masonry-line</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">palette-line</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">pencil-line</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">pencil-ruler-2-line</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe733;</span>
                <div class="name">terminal-window-line</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
                <div class="name">battery-charge-line</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">battery-low-line</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe739;</span>
                <div class="name">bluetooth-line</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe738;</span>
                <div class="name">bluetooth-connect-line</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73a;</span>
                <div class="name">computer-line</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">cpu-line</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">dashboard-3-line</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe740;</span>
                <div class="name">gps-line</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">hard-drive-2-line</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">fingerprint-2-line</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">install-line</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">install-fill</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe745;</span>
                <div class="name">macbook-line</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe747;</span>
                <div class="name">qr-code-line</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe746;</span>
                <div class="name">phone-line</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe748;</span>
                <div class="name">qr-scan-2-line</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe749;</span>
                <div class="name">radar-line</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74a;</span>
                <div class="name">battery-line</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">remote-control-line</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74c;</span>
                <div class="name">restart-line</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">router-line</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1679032853359') format('woff2'),
       url('iconfont.woff?t=1679032853359') format('woff'),
       url('iconfont.ttf?t=1679032853359') format('truetype'),
       url('iconfont.svg?t=1679032853359#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left"></span>
            <div class="name">
              arrow-left-3
            </div>
            <div class="code-name">.icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right"></span>
            <div class="name">
              arrow-right-3
            </div>
            <div class="code-name">.icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-z550"></span>
            <div class="name">
              z550
            </div>
            <div class="code-name">.icon-z550
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icon-dianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-date"></span>
            <div class="name">
              Date
            </div>
            <div class="code-name">.icon-date
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cate"></span>
            <div class="name">
              cate
            </div>
            <div class="code-name">.icon-cate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-message"></span>
            <div class="name">
              message
            </div>
            <div class="code-name">.icon-message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.icon-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-empty1"></span>
            <div class="name">
              empty
            </div>
            <div class="code-name">.icon-empty1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete-bin-3-line"></span>
            <div class="name">
              delete-bin-3-line
            </div>
            <div class="code-name">.icon-delete-bin-3-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete-bin-4-line"></span>
            <div class="name">
              delete-bin-4-line
            </div>
            <div class="code-name">.icon-delete-bin-4-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete-bin-line"></span>
            <div class="name">
              delete-bin-line
            </div>
            <div class="code-name">.icon-delete-bin-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-empty"></span>
            <div class="name">
              空
            </div>
            <div class="code-name">.icon-empty
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-key-line"></span>
            <div class="name">
              key-line
            </div>
            <div class="code-name">.icon-key-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock-2-line"></span>
            <div class="name">
              lock-2-line
            </div>
            <div class="code-name">.icon-lock-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-up"></span>
            <div class="name">
              arrow-down-copy
            </div>
            <div class="code-name">.icon-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gotop"></span>
            <div class="name">
              goto-top
            </div>
            <div class="code-name">.icon-gotop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search-sm
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-emoji"></span>
            <div class="name">
              emoji
            </div>
            <div class="code-name">.icon-emoji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              search close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowleft"></span>
            <div class="name">
              htb－Arrow right02
            </div>
            <div class="code-name">.icon-arrowleft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
              search close
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowright"></span>
            <div class="name">
              htb－Arrow right02
            </div>
            <div class="code-name">.icon-arrowright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowtop"></span>
            <div class="name">
              htb－Arrow right02
            </div>
            <div class="code-name">.icon-arrowtop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-router-fill"></span>
            <div class="name">
              router-fill
            </div>
            <div class="code-name">.icon-router-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rss-line"></span>
            <div class="name">
              rss-line
            </div>
            <div class="code-name">.icon-rss-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-save-3-fill"></span>
            <div class="name">
              save-3-fill
            </div>
            <div class="code-name">.icon-save-3-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-signal-wifi-error-line"></span>
            <div class="name">
              signal-wifi-error-line
            </div>
            <div class="code-name">.icon-signal-wifi-error-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tablet-line"></span>
            <div class="name">
              tablet-line
            </div>
            <div class="code-name">.icon-tablet-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tv-2-line"></span>
            <div class="name">
              tv-2-line
            </div>
            <div class="code-name">.icon-tv-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-u-disk-line"></span>
            <div class="name">
              u-disk-line
            </div>
            <div class="code-name">.icon-u-disk-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tv-line"></span>
            <div class="name">
              tv-line
            </div>
            <div class="code-name">.icon-tv-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-uninstall-line"></span>
            <div class="name">
              uninstall-line
            </div>
            <div class="code-name">.icon-uninstall-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-usb-line"></span>
            <div class="name">
              usb-line
            </div>
            <div class="code-name">.icon-usb-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wifi-line"></span>
            <div class="name">
              wifi-line
            </div>
            <div class="code-name">.icon-wifi-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wifi-off-line"></span>
            <div class="name">
              wifi-off-line
            </div>
            <div class="code-name">.icon-wifi-off-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-chart-line"></span>
            <div class="name">
              file-chart-line
            </div>
            <div class="code-name">.icon-file-chart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-line"></span>
            <div class="name">
              file-line
            </div>
            <div class="code-name">.icon-file-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-text-line"></span>
            <div class="name">
              file-text-line
            </div>
            <div class="code-name">.icon-file-text-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-word-line"></span>
            <div class="name">
              file-word-line
            </div>
            <div class="code-name">.icon-file-word-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-numbers-fill"></span>
            <div class="name">
              numbers-fill
            </div>
            <div class="code-name">.icon-numbers-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-numbers-line"></span>
            <div class="name">
              numbers-line
            </div>
            <div class="code-name">.icon-numbers-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sticky-note-2-line"></span>
            <div class="name">
              sticky-note-2-line
            </div>
            <div class="code-name">.icon-sticky-note-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-survey-line"></span>
            <div class="name">
              survey-line
            </div>
            <div class="code-name">.icon-survey-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-todo-line"></span>
            <div class="name">
              todo-line
            </div>
            <div class="code-name">.icon-todo-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-attachment-2"></span>
            <div class="name">
              attachment-2
            </div>
            <div class="code-name">.icon-attachment-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number-2"></span>
            <div class="name">
              number-2
            </div>
            <div class="code-name">.icon-number-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number-0"></span>
            <div class="name">
              number-0
            </div>
            <div class="code-name">.icon-number-0
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number-4"></span>
            <div class="name">
              number-4
            </div>
            <div class="code-name">.icon-number-4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number-6"></span>
            <div class="name">
              number-6
            </div>
            <div class="code-name">.icon-number-6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number-7"></span>
            <div class="name">
              number-7
            </div>
            <div class="code-name">.icon-number-7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number-3"></span>
            <div class="name">
              number-3
            </div>
            <div class="code-name">.icon-number-3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number-8"></span>
            <div class="name">
              number-8
            </div>
            <div class="code-name">.icon-number-8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number-5"></span>
            <div class="name">
              number-5
            </div>
            <div class="code-name">.icon-number-5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number-9"></span>
            <div class="name">
              number-9
            </div>
            <div class="code-name">.icon-number-9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-organization-chart"></span>
            <div class="name">
              organization-chart
            </div>
            <div class="code-name">.icon-organization-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number-1"></span>
            <div class="name">
              number-1
            </div>
            <div class="code-name">.icon-number-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question-mark"></span>
            <div class="name">
              question-mark
            </div>
            <div class="code-name">.icon-question-mark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-send-backward"></span>
            <div class="name">
              send-backward
            </div>
            <div class="code-name">.icon-send-backward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rounded-corner"></span>
            <div class="name">
              rounded-corner
            </div>
            <div class="code-name">.icon-rounded-corner
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-translate"></span>
            <div class="name">
              translate
            </div>
            <div class="code-name">.icon-translate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-24-hours-line"></span>
            <div class="name">
              24-hours-line
            </div>
            <div class="code-name">.icon-24-hours-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hand-heart-line"></span>
            <div class="name">
              hand-heart-line
            </div>
            <div class="code-name">.icon-hand-heart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hand-coin-line"></span>
            <div class="name">
              hand-coin-line
            </div>
            <div class="code-name">.icon-hand-coin-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-price-tag-3-line"></span>
            <div class="name">
              price-tag-3-line
            </div>
            <div class="code-name">.icon-price-tag-3-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip-fill"></span>
            <div class="name">
              vip-fill
            </div>
            <div class="code-name">.icon-vip-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vip-line"></span>
            <div class="name">
              vip-line
            </div>
            <div class="code-name">.icon-vip-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-capsule-line"></span>
            <div class="name">
              capsule-line
            </div>
            <div class="code-name">.icon-capsule-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flask-line"></span>
            <div class="name">
              flask-line
            </div>
            <div class="code-name">.icon-flask-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-heart-fill"></span>
            <div class="name">
              heart-fill
            </div>
            <div class="code-name">.icon-heart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-heart-line"></span>
            <div class="name">
              heart-line
            </div>
            <div class="code-name">.icon-heart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-heart-2-line"></span>
            <div class="name">
              heart-2-line
            </div>
            <div class="code-name">.icon-heart-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hearts-line"></span>
            <div class="name">
              hearts-line
            </div>
            <div class="code-name">.icon-hearts-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-surgical-mask-line"></span>
            <div class="name">
              surgical-mask-line
            </div>
            <div class="code-name">.icon-surgical-mask-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-test-tube-line"></span>
            <div class="name">
              test-tube-line
            </div>
            <div class="code-name">.icon-test-tube-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baidu-fill"></span>
            <div class="name">
              baidu-fill
            </div>
            <div class="code-name">.icon-baidu-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chrome-fill"></span>
            <div class="name">
              chrome-fill
            </div>
            <div class="code-name">.icon-chrome-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baidu-line"></span>
            <div class="name">
              baidu-line
            </div>
            <div class="code-name">.icon-baidu-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drive-line"></span>
            <div class="name">
              drive-line
            </div>
            <div class="code-name">.icon-drive-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qq-fill"></span>
            <div class="name">
              qq-fill
            </div>
            <div class="code-name">.icon-qq-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qq-line"></span>
            <div class="name">
              qq-line
            </div>
            <div class="code-name">.icon-qq-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vuejs-line"></span>
            <div class="name">
              vuejs-line
            </div>
            <div class="code-name">.icon-vuejs-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vuejs-fill"></span>
            <div class="name">
              vuejs-fill
            </div>
            <div class="code-name">.icon-vuejs-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibo-line"></span>
            <div class="name">
              weibo-line
            </div>
            <div class="code-name">.icon-weibo-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibo-fill"></span>
            <div class="name">
              weibo-fill
            </div>
            <div class="code-name">.icon-weibo-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wechat-fill"></span>
            <div class="name">
              wechat-fill
            </div>
            <div class="code-name">.icon-wechat-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wechat-line"></span>
            <div class="name">
              wechat-line
            </div>
            <div class="code-name">.icon-wechat-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhihu-fill"></span>
            <div class="name">
              zhihu-fill
            </div>
            <div class="code-name">.icon-zhihu-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wechat-2-line"></span>
            <div class="name">
              wechat-2-line
            </div>
            <div class="code-name">.icon-wechat-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-compass-4-line"></span>
            <div class="name">
              compass-4-line
            </div>
            <div class="code-name">.icon-compass-4-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-charging-pile-fill"></span>
            <div class="name">
              charging-pile-fill
            </div>
            <div class="code-name">.icon-charging-pile-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-map-pin-2-fill"></span>
            <div class="name">
              map-pin-2-fill
            </div>
            <div class="code-name">.icon-map-pin-2-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-map-pin-3-line"></span>
            <div class="name">
              map-pin-3-line
            </div>
            <div class="code-name">.icon-map-pin-3-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lifebuoy-line"></span>
            <div class="name">
              lifebuoy-line
            </div>
            <div class="code-name">.icon-lifebuoy-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-map-pin-2-line"></span>
            <div class="name">
              map-pin-2-line
            </div>
            <div class="code-name">.icon-map-pin-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-map-pin-line"></span>
            <div class="name">
              map-pin-line
            </div>
            <div class="code-name">.icon-map-pin-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-route-fill"></span>
            <div class="name">
              route-fill
            </div>
            <div class="code-name">.icon-route-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-takeaway-line"></span>
            <div class="name">
              takeaway-line
            </div>
            <div class="code-name">.icon-takeaway-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-walk-line"></span>
            <div class="name">
              walk-line
            </div>
            <div class="code-name">.icon-walk-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-album-line"></span>
            <div class="name">
              album-line
            </div>
            <div class="code-name">.icon-album-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-broadcast-fill"></span>
            <div class="name">
              broadcast-fill
            </div>
            <div class="code-name">.icon-broadcast-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-broadcast-line"></span>
            <div class="name">
              broadcast-line
            </div>
            <div class="code-name">.icon-broadcast-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dv-fill"></span>
            <div class="name">
              dv-fill
            </div>
            <div class="code-name">.icon-dv-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-film-fill"></span>
            <div class="name">
              film-fill
            </div>
            <div class="code-name">.icon-film-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-film-line"></span>
            <div class="name">
              film-line
            </div>
            <div class="code-name">.icon-film-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hd-fill"></span>
            <div class="name">
              hd-fill
            </div>
            <div class="code-name">.icon-hd-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-image-line"></span>
            <div class="name">
              image-line
            </div>
            <div class="code-name">.icon-image-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-landscape-fill"></span>
            <div class="name">
              landscape-fill
            </div>
            <div class="code-name">.icon-landscape-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-landscape-line"></span>
            <div class="name">
              landscape-line
            </div>
            <div class="code-name">.icon-landscape-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-movie-2-line"></span>
            <div class="name">
              movie-2-line
            </div>
            <div class="code-name">.icon-movie-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-movie-line"></span>
            <div class="name">
              movie-line
            </div>
            <div class="code-name">.icon-movie-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-movie-fill"></span>
            <div class="name">
              movie-fill
            </div>
            <div class="code-name">.icon-movie-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pause-mini-fill"></span>
            <div class="name">
              pause-mini-fill
            </div>
            <div class="code-name">.icon-pause-mini-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mic-2-line"></span>
            <div class="name">
              mic-2-line
            </div>
            <div class="code-name">.icon-mic-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-picture-in-picture-line"></span>
            <div class="name">
              picture-in-picture-line
            </div>
            <div class="code-name">.icon-picture-in-picture-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-play-circle-line"></span>
            <div class="name">
              play-circle-line
            </div>
            <div class="code-name">.icon-play-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-play-fill"></span>
            <div class="name">
              play-fill
            </div>
            <div class="code-name">.icon-play-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-play-mini-line"></span>
            <div class="name">
              play-mini-line
            </div>
            <div class="code-name">.icon-play-mini-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-repeat-2-line"></span>
            <div class="name">
              repeat-2-line
            </div>
            <div class="code-name">.icon-repeat-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rewind-fill"></span>
            <div class="name">
              rewind-fill
            </div>
            <div class="code-name">.icon-rewind-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-repeat-one-line"></span>
            <div class="name">
              repeat-one-line
            </div>
            <div class="code-name">.icon-repeat-one-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rewind-line"></span>
            <div class="name">
              rewind-line
            </div>
            <div class="code-name">.icon-rewind-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rewind-mini-fill"></span>
            <div class="name">
              rewind-mini-fill
            </div>
            <div class="code-name">.icon-rewind-mini-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rhythm-fill"></span>
            <div class="name">
              rhythm-fill
            </div>
            <div class="code-name">.icon-rhythm-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-speaker-2-line"></span>
            <div class="name">
              speaker-2-line
            </div>
            <div class="code-name">.icon-speaker-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-speaker-3-line"></span>
            <div class="name">
              speaker-3-line
            </div>
            <div class="code-name">.icon-speaker-3-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-speed-mini-fill"></span>
            <div class="name">
              speed-mini-fill
            </div>
            <div class="code-name">.icon-speed-mini-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-speed-mini-line"></span>
            <div class="name">
              speed-mini-line
            </div>
            <div class="code-name">.icon-speed-mini-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-speed-line"></span>
            <div class="name">
              speed-line
            </div>
            <div class="code-name">.icon-speed-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stop-circle-fill"></span>
            <div class="name">
              stop-circle-fill
            </div>
            <div class="code-name">.icon-stop-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stop-circle-line"></span>
            <div class="name">
              stop-circle-line
            </div>
            <div class="code-name">.icon-stop-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stop-fill"></span>
            <div class="name">
              stop-fill
            </div>
            <div class="code-name">.icon-stop-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stop-line"></span>
            <div class="name">
              stop-line
            </div>
            <div class="code-name">.icon-stop-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stop-mini-line"></span>
            <div class="name">
              stop-mini-line
            </div>
            <div class="code-name">.icon-stop-mini-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stop-mini-fill"></span>
            <div class="name">
              stop-mini-fill
            </div>
            <div class="code-name">.icon-stop-mini-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video-fill"></span>
            <div class="name">
              video-fill
            </div>
            <div class="code-name">.icon-video-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video-line"></span>
            <div class="name">
              video-line
            </div>
            <div class="code-name">.icon-video-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vidicon-fill"></span>
            <div class="name">
              vidicon-fill
            </div>
            <div class="code-name">.icon-vidicon-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vidicon-line"></span>
            <div class="name">
              vidicon-line
            </div>
            <div class="code-name">.icon-vidicon-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-volume-down-line"></span>
            <div class="name">
              volume-down-line
            </div>
            <div class="code-name">.icon-volume-down-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-volume-mute-line"></span>
            <div class="name">
              volume-mute-line
            </div>
            <div class="code-name">.icon-volume-mute-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-volume-up-line"></span>
            <div class="name">
              volume-up-line
            </div>
            <div class="code-name">.icon-volume-up-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-leaf-line"></span>
            <div class="name">
              leaf-line
            </div>
            <div class="code-name">.icon-leaf-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-leaf-fill"></span>
            <div class="name">
              leaf-fill
            </div>
            <div class="code-name">.icon-leaf-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lightbulb-flash-line"></span>
            <div class="name">
              lightbulb-flash-line
            </div>
            <div class="code-name">.icon-lightbulb-flash-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lightbulb-line"></span>
            <div class="name">
              lightbulb-line
            </div>
            <div class="code-name">.icon-lightbulb-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plant-line"></span>
            <div class="name">
              plant-line
            </div>
            <div class="code-name">.icon-plant-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fridge-line"></span>
            <div class="name">
              fridge-line
            </div>
            <div class="code-name">.icon-fridge-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plug-2-line"></span>
            <div class="name">
              plug-2-line
            </div>
            <div class="code-name">.icon-plug-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reserved-line"></span>
            <div class="name">
              reserved-line
            </div>
            <div class="code-name">.icon-reserved-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-seedling-fill"></span>
            <div class="name">
              seedling-fill
            </div>
            <div class="code-name">.icon-seedling-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-seedling-line"></span>
            <div class="name">
              seedling-line
            </div>
            <div class="code-name">.icon-seedling-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-recycle-line"></span>
            <div class="name">
              recycle-line
            </div>
            <div class="code-name">.icon-recycle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-line"></span>
            <div class="name">
              add-line
            </div>
            <div class="code-name">.icon-add-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alert-line"></span>
            <div class="name">
              alert-line
            </div>
            <div class="code-name">.icon-alert-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alarm-warning-line"></span>
            <div class="name">
              alarm-warning-line
            </div>
            <div class="code-name">.icon-alarm-warning-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-apps-2-line"></span>
            <div class="name">
              apps-2-line
            </div>
            <div class="code-name">.icon-apps-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-apps-line"></span>
            <div class="name">
              apps-line
            </div>
            <div class="code-name">.icon-apps-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-check-double-line"></span>
            <div class="name">
              check-double-line
            </div>
            <div class="code-name">.icon-check-double-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-check-line"></span>
            <div class="name">
              check-line
            </div>
            <div class="code-name">.icon-check-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-error-warning-line"></span>
            <div class="name">
              error-warning-line
            </div>
            <div class="code-name">.icon-error-warning-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-external-link-fill"></span>
            <div class="name">
              external-link-fill
            </div>
            <div class="code-name">.icon-external-link-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eye-line"></span>
            <div class="name">
              eye-line
            </div>
            <div class="code-name">.icon-eye-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eye-close-line"></span>
            <div class="name">
              eye-close-line
            </div>
            <div class="code-name">.icon-eye-close-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings-4-line"></span>
            <div class="name">
              settings-4-line
            </div>
            <div class="code-name">.icon-settings-4-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share-forward-line"></span>
            <div class="name">
              share-forward-line
            </div>
            <div class="code-name">.icon-share-forward-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share-line"></span>
            <div class="name">
              share-line
            </div>
            <div class="code-name">.icon-share-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shield-flash-line"></span>
            <div class="name">
              shield-flash-line
            </div>
            <div class="code-name">.icon-shield-flash-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shield-line"></span>
            <div class="name">
              shield-line
            </div>
            <div class="code-name">.icon-shield-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shield-star-line"></span>
            <div class="name">
              shield-star-line
            </div>
            <div class="code-name">.icon-shield-star-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star-fill"></span>
            <div class="name">
              star-fill
            </div>
            <div class="code-name">.icon-star-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star-line"></span>
            <div class="name">
              star-line
            </div>
            <div class="code-name">.icon-star-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-spam-line"></span>
            <div class="name">
              spam-line
            </div>
            <div class="code-name">.icon-spam-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-time-line"></span>
            <div class="name">
              time-line
            </div>
            <div class="code-name">.icon-time-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-timer-2-line"></span>
            <div class="name">
              timer-2-line
            </div>
            <div class="code-name">.icon-timer-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-timer-flash-line"></span>
            <div class="name">
              timer-flash-line
            </div>
            <div class="code-name">.icon-timer-flash-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-toggle-line"></span>
            <div class="name">
              toggle-line
            </div>
            <div class="code-name">.icon-toggle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user-3-line"></span>
            <div class="name">
              user-3-line
            </div>
            <div class="code-name">.icon-user-3-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-blaze-line"></span>
            <div class="name">
              blaze-line
            </div>
            <div class="code-name">.icon-blaze-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-celsius-fill"></span>
            <div class="name">
              celsius-fill
            </div>
            <div class="code-name">.icon-celsius-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudy-2-line"></span>
            <div class="name">
              cloudy-2-line
            </div>
            <div class="code-name">.icon-cloudy-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudy-line"></span>
            <div class="name">
              cloudy-line
            </div>
            <div class="code-name">.icon-cloudy-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drizzle-line"></span>
            <div class="name">
              drizzle-line
            </div>
            <div class="code-name">.icon-drizzle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fire-line"></span>
            <div class="name">
              fire-line
            </div>
            <div class="code-name">.icon-fire-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-foggy-fill"></span>
            <div class="name">
              foggy-fill
            </div>
            <div class="code-name">.icon-foggy-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hail-line"></span>
            <div class="name">
              hail-line
            </div>
            <div class="code-name">.icon-hail-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-foggy-line"></span>
            <div class="name">
              foggy-line
            </div>
            <div class="code-name">.icon-foggy-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-haze-line"></span>
            <div class="name">
              haze-line
            </div>
            <div class="code-name">.icon-haze-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-heavy-showers-line"></span>
            <div class="name">
              heavy-showers-line
            </div>
            <div class="code-name">.icon-heavy-showers-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mist-fill"></span>
            <div class="name">
              mist-fill
            </div>
            <div class="code-name">.icon-mist-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moon-clear-line"></span>
            <div class="name">
              moon-clear-line
            </div>
            <div class="code-name">.icon-moon-clear-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moon-cloudy-line"></span>
            <div class="name">
              moon-cloudy-line
            </div>
            <div class="code-name">.icon-moon-cloudy-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moon-foggy-line"></span>
            <div class="name">
              moon-foggy-line
            </div>
            <div class="code-name">.icon-moon-foggy-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rainy-line"></span>
            <div class="name">
              rainy-line
            </div>
            <div class="code-name">.icon-rainy-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rainbow-line"></span>
            <div class="name">
              rainbow-line
            </div>
            <div class="code-name">.icon-rainbow-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-showers-line"></span>
            <div class="name">
              showers-line
            </div>
            <div class="code-name">.icon-showers-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moon-line"></span>
            <div class="name">
              moon-line
            </div>
            <div class="code-name">.icon-moon-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-snowy-line"></span>
            <div class="name">
              snowy-line
            </div>
            <div class="code-name">.icon-snowy-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sun-cloudy-line"></span>
            <div class="name">
              sun-cloudy-line
            </div>
            <div class="code-name">.icon-sun-cloudy-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sun-foggy-line"></span>
            <div class="name">
              sun-foggy-line
            </div>
            <div class="code-name">.icon-sun-foggy-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sun-line"></span>
            <div class="name">
              sun-line
            </div>
            <div class="code-name">.icon-sun-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-temp-cold-line"></span>
            <div class="name">
              temp-cold-line
            </div>
            <div class="code-name">.icon-temp-cold-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-temp-hot-line"></span>
            <div class="name">
              temp-hot-line
            </div>
            <div class="code-name">.icon-temp-hot-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thunderstorms-line"></span>
            <div class="name">
              thunderstorms-line
            </div>
            <div class="code-name">.icon-thunderstorms-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-typhoon-line"></span>
            <div class="name">
              typhoon-line
            </div>
            <div class="code-name">.icon-typhoon-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-windy-fill"></span>
            <div class="name">
              windy-fill
            </div>
            <div class="code-name">.icon-windy-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-meteor-line"></span>
            <div class="name">
              meteor-line
            </div>
            <div class="code-name">.icon-meteor-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bangsi"></span>
            <div class="name">
              bangsi
            </div>
            <div class="code-name">.icon-bangsi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-building-2-line"></span>
            <div class="name">
              building-2-line
            </div>
            <div class="code-name">.icon-building-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home-2-line"></span>
            <div class="name">
              home-2-line
            </div>
            <div class="code-name">.icon-home-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-archive-drawer-fill"></span>
            <div class="name">
              archive-drawer-fill
            </div>
            <div class="code-name">.icon-archive-drawer-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bubble-chart-line"></span>
            <div class="name">
              bubble-chart-line
            </div>
            <div class="code-name">.icon-bubble-chart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-customer-service-line"></span>
            <div class="name">
              customer-service-line
            </div>
            <div class="code-name">.icon-customer-service-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flag-2-line"></span>
            <div class="name">
              flag-2-line
            </div>
            <div class="code-name">.icon-flag-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-line-chart-line"></span>
            <div class="name">
              line-chart-line
            </div>
            <div class="code-name">.icon-line-chart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pie-chart-2-line"></span>
            <div class="name">
              pie-chart-2-line
            </div>
            <div class="code-name">.icon-pie-chart-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-send-plane-fill"></span>
            <div class="name">
              send-plane-fill
            </div>
            <div class="code-name">.icon-send-plane-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-message-3-line"></span>
            <div class="name">
              message-3-line
            </div>
            <div class="code-name">.icon-message-3-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-collage-line"></span>
            <div class="name">
              collage-line
            </div>
            <div class="code-name">.icon-collage-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drag-drop-line"></span>
            <div class="name">
              drag-drop-line
            </div>
            <div class="code-name">.icon-drag-drop-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-grid-line"></span>
            <div class="name">
              grid-line
            </div>
            <div class="code-name">.icon-grid-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hammer-line"></span>
            <div class="name">
              hammer-line
            </div>
            <div class="code-name">.icon-hammer-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-grid-fill"></span>
            <div class="name">
              grid-fill
            </div>
            <div class="code-name">.icon-grid-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layout-masonry-line"></span>
            <div class="name">
              layout-masonry-line
            </div>
            <div class="code-name">.icon-layout-masonry-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-palette-line"></span>
            <div class="name">
              palette-line
            </div>
            <div class="code-name">.icon-palette-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pencil-line"></span>
            <div class="name">
              pencil-line
            </div>
            <div class="code-name">.icon-pencil-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pencil-ruler-2-line"></span>
            <div class="name">
              pencil-ruler-2-line
            </div>
            <div class="code-name">.icon-pencil-ruler-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-terminal-window-line"></span>
            <div class="name">
              terminal-window-line
            </div>
            <div class="code-name">.icon-terminal-window-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-battery-charge-line"></span>
            <div class="name">
              battery-charge-line
            </div>
            <div class="code-name">.icon-battery-charge-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-battery-low-line"></span>
            <div class="name">
              battery-low-line
            </div>
            <div class="code-name">.icon-battery-low-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bluetooth-line"></span>
            <div class="name">
              bluetooth-line
            </div>
            <div class="code-name">.icon-bluetooth-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bluetooth-connect-line"></span>
            <div class="name">
              bluetooth-connect-line
            </div>
            <div class="code-name">.icon-bluetooth-connect-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-computer-line"></span>
            <div class="name">
              computer-line
            </div>
            <div class="code-name">.icon-computer-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cpu-line"></span>
            <div class="name">
              cpu-line
            </div>
            <div class="code-name">.icon-cpu-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dashboard-3-line"></span>
            <div class="name">
              dashboard-3-line
            </div>
            <div class="code-name">.icon-dashboard-3-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gps-line"></span>
            <div class="name">
              gps-line
            </div>
            <div class="code-name">.icon-gps-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hard-drive-2-line"></span>
            <div class="name">
              hard-drive-2-line
            </div>
            <div class="code-name">.icon-hard-drive-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fingerprint-2-line"></span>
            <div class="name">
              fingerprint-2-line
            </div>
            <div class="code-name">.icon-fingerprint-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-install-line"></span>
            <div class="name">
              install-line
            </div>
            <div class="code-name">.icon-install-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-install-fill"></span>
            <div class="name">
              install-fill
            </div>
            <div class="code-name">.icon-install-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-macbook-line"></span>
            <div class="name">
              macbook-line
            </div>
            <div class="code-name">.icon-macbook-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qr-code-line"></span>
            <div class="name">
              qr-code-line
            </div>
            <div class="code-name">.icon-qr-code-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phone-line"></span>
            <div class="name">
              phone-line
            </div>
            <div class="code-name">.icon-phone-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qr-scan-2-line"></span>
            <div class="name">
              qr-scan-2-line
            </div>
            <div class="code-name">.icon-qr-scan-2-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-radar-line"></span>
            <div class="name">
              radar-line
            </div>
            <div class="code-name">.icon-radar-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-battery-line"></span>
            <div class="name">
              battery-line
            </div>
            <div class="code-name">.icon-battery-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-remote-control-line"></span>
            <div class="name">
              remote-control-line
            </div>
            <div class="code-name">.icon-remote-control-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-restart-line"></span>
            <div class="name">
              restart-line
            </div>
            <div class="code-name">.icon-restart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-router-line"></span>
            <div class="name">
              router-line
            </div>
            <div class="code-name">.icon-router-line
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left"></use>
                </svg>
                <div class="name">arrow-left-3</div>
                <div class="code-name">#icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right"></use>
                </svg>
                <div class="name">arrow-right-3</div>
                <div class="code-name">#icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-z550"></use>
                </svg>
                <div class="name">z550</div>
                <div class="code-name">#icon-z550</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icon-dianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-date"></use>
                </svg>
                <div class="name">Date</div>
                <div class="code-name">#icon-date</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cate"></use>
                </svg>
                <div class="name">cate</div>
                <div class="code-name">#icon-cate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message"></use>
                </svg>
                <div class="name">message</div>
                <div class="code-name">#icon-message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#icon-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-empty1"></use>
                </svg>
                <div class="name">empty</div>
                <div class="code-name">#icon-empty1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin-3-line"></use>
                </svg>
                <div class="name">delete-bin-3-line</div>
                <div class="code-name">#icon-delete-bin-3-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin-4-line"></use>
                </svg>
                <div class="name">delete-bin-4-line</div>
                <div class="code-name">#icon-delete-bin-4-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin-line"></use>
                </svg>
                <div class="name">delete-bin-line</div>
                <div class="code-name">#icon-delete-bin-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-empty"></use>
                </svg>
                <div class="name">空</div>
                <div class="code-name">#icon-empty</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-key-line"></use>
                </svg>
                <div class="name">key-line</div>
                <div class="code-name">#icon-key-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-2-line"></use>
                </svg>
                <div class="name">lock-2-line</div>
                <div class="code-name">#icon-lock-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up"></use>
                </svg>
                <div class="name">arrow-down-copy</div>
                <div class="code-name">#icon-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gotop"></use>
                </svg>
                <div class="name">goto-top</div>
                <div class="code-name">#icon-gotop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search-sm</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-emoji"></use>
                </svg>
                <div class="name">emoji</div>
                <div class="code-name">#icon-emoji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">search close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowleft"></use>
                </svg>
                <div class="name">htb－Arrow right02</div>
                <div class="code-name">#icon-arrowleft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">search close</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowright"></use>
                </svg>
                <div class="name">htb－Arrow right02</div>
                <div class="code-name">#icon-arrowright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowtop"></use>
                </svg>
                <div class="name">htb－Arrow right02</div>
                <div class="code-name">#icon-arrowtop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-router-fill"></use>
                </svg>
                <div class="name">router-fill</div>
                <div class="code-name">#icon-router-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rss-line"></use>
                </svg>
                <div class="name">rss-line</div>
                <div class="code-name">#icon-rss-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-save-3-fill"></use>
                </svg>
                <div class="name">save-3-fill</div>
                <div class="code-name">#icon-save-3-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-signal-wifi-error-line"></use>
                </svg>
                <div class="name">signal-wifi-error-line</div>
                <div class="code-name">#icon-signal-wifi-error-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tablet-line"></use>
                </svg>
                <div class="name">tablet-line</div>
                <div class="code-name">#icon-tablet-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tv-2-line"></use>
                </svg>
                <div class="name">tv-2-line</div>
                <div class="code-name">#icon-tv-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-u-disk-line"></use>
                </svg>
                <div class="name">u-disk-line</div>
                <div class="code-name">#icon-u-disk-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tv-line"></use>
                </svg>
                <div class="name">tv-line</div>
                <div class="code-name">#icon-tv-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-uninstall-line"></use>
                </svg>
                <div class="name">uninstall-line</div>
                <div class="code-name">#icon-uninstall-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-usb-line"></use>
                </svg>
                <div class="name">usb-line</div>
                <div class="code-name">#icon-usb-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wifi-line"></use>
                </svg>
                <div class="name">wifi-line</div>
                <div class="code-name">#icon-wifi-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wifi-off-line"></use>
                </svg>
                <div class="name">wifi-off-line</div>
                <div class="code-name">#icon-wifi-off-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-chart-line"></use>
                </svg>
                <div class="name">file-chart-line</div>
                <div class="code-name">#icon-file-chart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-line"></use>
                </svg>
                <div class="name">file-line</div>
                <div class="code-name">#icon-file-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-text-line"></use>
                </svg>
                <div class="name">file-text-line</div>
                <div class="code-name">#icon-file-text-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-word-line"></use>
                </svg>
                <div class="name">file-word-line</div>
                <div class="code-name">#icon-file-word-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-numbers-fill"></use>
                </svg>
                <div class="name">numbers-fill</div>
                <div class="code-name">#icon-numbers-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-numbers-line"></use>
                </svg>
                <div class="name">numbers-line</div>
                <div class="code-name">#icon-numbers-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sticky-note-2-line"></use>
                </svg>
                <div class="name">sticky-note-2-line</div>
                <div class="code-name">#icon-sticky-note-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-survey-line"></use>
                </svg>
                <div class="name">survey-line</div>
                <div class="code-name">#icon-survey-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-todo-line"></use>
                </svg>
                <div class="name">todo-line</div>
                <div class="code-name">#icon-todo-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attachment-2"></use>
                </svg>
                <div class="name">attachment-2</div>
                <div class="code-name">#icon-attachment-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number-2"></use>
                </svg>
                <div class="name">number-2</div>
                <div class="code-name">#icon-number-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number-0"></use>
                </svg>
                <div class="name">number-0</div>
                <div class="code-name">#icon-number-0</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number-4"></use>
                </svg>
                <div class="name">number-4</div>
                <div class="code-name">#icon-number-4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number-6"></use>
                </svg>
                <div class="name">number-6</div>
                <div class="code-name">#icon-number-6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number-7"></use>
                </svg>
                <div class="name">number-7</div>
                <div class="code-name">#icon-number-7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number-3"></use>
                </svg>
                <div class="name">number-3</div>
                <div class="code-name">#icon-number-3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number-8"></use>
                </svg>
                <div class="name">number-8</div>
                <div class="code-name">#icon-number-8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number-5"></use>
                </svg>
                <div class="name">number-5</div>
                <div class="code-name">#icon-number-5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number-9"></use>
                </svg>
                <div class="name">number-9</div>
                <div class="code-name">#icon-number-9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-organization-chart"></use>
                </svg>
                <div class="name">organization-chart</div>
                <div class="code-name">#icon-organization-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number-1"></use>
                </svg>
                <div class="name">number-1</div>
                <div class="code-name">#icon-number-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-mark"></use>
                </svg>
                <div class="name">question-mark</div>
                <div class="code-name">#icon-question-mark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-send-backward"></use>
                </svg>
                <div class="name">send-backward</div>
                <div class="code-name">#icon-send-backward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rounded-corner"></use>
                </svg>
                <div class="name">rounded-corner</div>
                <div class="code-name">#icon-rounded-corner</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-translate"></use>
                </svg>
                <div class="name">translate</div>
                <div class="code-name">#icon-translate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-24-hours-line"></use>
                </svg>
                <div class="name">24-hours-line</div>
                <div class="code-name">#icon-24-hours-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hand-heart-line"></use>
                </svg>
                <div class="name">hand-heart-line</div>
                <div class="code-name">#icon-hand-heart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hand-coin-line"></use>
                </svg>
                <div class="name">hand-coin-line</div>
                <div class="code-name">#icon-hand-coin-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-price-tag-3-line"></use>
                </svg>
                <div class="name">price-tag-3-line</div>
                <div class="code-name">#icon-price-tag-3-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip-fill"></use>
                </svg>
                <div class="name">vip-fill</div>
                <div class="code-name">#icon-vip-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vip-line"></use>
                </svg>
                <div class="name">vip-line</div>
                <div class="code-name">#icon-vip-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-capsule-line"></use>
                </svg>
                <div class="name">capsule-line</div>
                <div class="code-name">#icon-capsule-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flask-line"></use>
                </svg>
                <div class="name">flask-line</div>
                <div class="code-name">#icon-flask-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart-fill"></use>
                </svg>
                <div class="name">heart-fill</div>
                <div class="code-name">#icon-heart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart-line"></use>
                </svg>
                <div class="name">heart-line</div>
                <div class="code-name">#icon-heart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart-2-line"></use>
                </svg>
                <div class="name">heart-2-line</div>
                <div class="code-name">#icon-heart-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hearts-line"></use>
                </svg>
                <div class="name">hearts-line</div>
                <div class="code-name">#icon-hearts-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-surgical-mask-line"></use>
                </svg>
                <div class="name">surgical-mask-line</div>
                <div class="code-name">#icon-surgical-mask-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-test-tube-line"></use>
                </svg>
                <div class="name">test-tube-line</div>
                <div class="code-name">#icon-test-tube-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baidu-fill"></use>
                </svg>
                <div class="name">baidu-fill</div>
                <div class="code-name">#icon-baidu-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chrome-fill"></use>
                </svg>
                <div class="name">chrome-fill</div>
                <div class="code-name">#icon-chrome-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baidu-line"></use>
                </svg>
                <div class="name">baidu-line</div>
                <div class="code-name">#icon-baidu-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drive-line"></use>
                </svg>
                <div class="name">drive-line</div>
                <div class="code-name">#icon-drive-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qq-fill"></use>
                </svg>
                <div class="name">qq-fill</div>
                <div class="code-name">#icon-qq-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qq-line"></use>
                </svg>
                <div class="name">qq-line</div>
                <div class="code-name">#icon-qq-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vuejs-line"></use>
                </svg>
                <div class="name">vuejs-line</div>
                <div class="code-name">#icon-vuejs-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vuejs-fill"></use>
                </svg>
                <div class="name">vuejs-fill</div>
                <div class="code-name">#icon-vuejs-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibo-line"></use>
                </svg>
                <div class="name">weibo-line</div>
                <div class="code-name">#icon-weibo-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibo-fill"></use>
                </svg>
                <div class="name">weibo-fill</div>
                <div class="code-name">#icon-weibo-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wechat-fill"></use>
                </svg>
                <div class="name">wechat-fill</div>
                <div class="code-name">#icon-wechat-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wechat-line"></use>
                </svg>
                <div class="name">wechat-line</div>
                <div class="code-name">#icon-wechat-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhihu-fill"></use>
                </svg>
                <div class="name">zhihu-fill</div>
                <div class="code-name">#icon-zhihu-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wechat-2-line"></use>
                </svg>
                <div class="name">wechat-2-line</div>
                <div class="code-name">#icon-wechat-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compass-4-line"></use>
                </svg>
                <div class="name">compass-4-line</div>
                <div class="code-name">#icon-compass-4-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-charging-pile-fill"></use>
                </svg>
                <div class="name">charging-pile-fill</div>
                <div class="code-name">#icon-charging-pile-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-map-pin-2-fill"></use>
                </svg>
                <div class="name">map-pin-2-fill</div>
                <div class="code-name">#icon-map-pin-2-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-map-pin-3-line"></use>
                </svg>
                <div class="name">map-pin-3-line</div>
                <div class="code-name">#icon-map-pin-3-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lifebuoy-line"></use>
                </svg>
                <div class="name">lifebuoy-line</div>
                <div class="code-name">#icon-lifebuoy-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-map-pin-2-line"></use>
                </svg>
                <div class="name">map-pin-2-line</div>
                <div class="code-name">#icon-map-pin-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-map-pin-line"></use>
                </svg>
                <div class="name">map-pin-line</div>
                <div class="code-name">#icon-map-pin-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-route-fill"></use>
                </svg>
                <div class="name">route-fill</div>
                <div class="code-name">#icon-route-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-takeaway-line"></use>
                </svg>
                <div class="name">takeaway-line</div>
                <div class="code-name">#icon-takeaway-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-walk-line"></use>
                </svg>
                <div class="name">walk-line</div>
                <div class="code-name">#icon-walk-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-album-line"></use>
                </svg>
                <div class="name">album-line</div>
                <div class="code-name">#icon-album-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-broadcast-fill"></use>
                </svg>
                <div class="name">broadcast-fill</div>
                <div class="code-name">#icon-broadcast-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-broadcast-line"></use>
                </svg>
                <div class="name">broadcast-line</div>
                <div class="code-name">#icon-broadcast-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dv-fill"></use>
                </svg>
                <div class="name">dv-fill</div>
                <div class="code-name">#icon-dv-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-film-fill"></use>
                </svg>
                <div class="name">film-fill</div>
                <div class="code-name">#icon-film-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-film-line"></use>
                </svg>
                <div class="name">film-line</div>
                <div class="code-name">#icon-film-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hd-fill"></use>
                </svg>
                <div class="name">hd-fill</div>
                <div class="code-name">#icon-hd-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-image-line"></use>
                </svg>
                <div class="name">image-line</div>
                <div class="code-name">#icon-image-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-landscape-fill"></use>
                </svg>
                <div class="name">landscape-fill</div>
                <div class="code-name">#icon-landscape-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-landscape-line"></use>
                </svg>
                <div class="name">landscape-line</div>
                <div class="code-name">#icon-landscape-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-movie-2-line"></use>
                </svg>
                <div class="name">movie-2-line</div>
                <div class="code-name">#icon-movie-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-movie-line"></use>
                </svg>
                <div class="name">movie-line</div>
                <div class="code-name">#icon-movie-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-movie-fill"></use>
                </svg>
                <div class="name">movie-fill</div>
                <div class="code-name">#icon-movie-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pause-mini-fill"></use>
                </svg>
                <div class="name">pause-mini-fill</div>
                <div class="code-name">#icon-pause-mini-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mic-2-line"></use>
                </svg>
                <div class="name">mic-2-line</div>
                <div class="code-name">#icon-mic-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture-in-picture-line"></use>
                </svg>
                <div class="name">picture-in-picture-line</div>
                <div class="code-name">#icon-picture-in-picture-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play-circle-line"></use>
                </svg>
                <div class="name">play-circle-line</div>
                <div class="code-name">#icon-play-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play-fill"></use>
                </svg>
                <div class="name">play-fill</div>
                <div class="code-name">#icon-play-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play-mini-line"></use>
                </svg>
                <div class="name">play-mini-line</div>
                <div class="code-name">#icon-play-mini-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-repeat-2-line"></use>
                </svg>
                <div class="name">repeat-2-line</div>
                <div class="code-name">#icon-repeat-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rewind-fill"></use>
                </svg>
                <div class="name">rewind-fill</div>
                <div class="code-name">#icon-rewind-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-repeat-one-line"></use>
                </svg>
                <div class="name">repeat-one-line</div>
                <div class="code-name">#icon-repeat-one-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rewind-line"></use>
                </svg>
                <div class="name">rewind-line</div>
                <div class="code-name">#icon-rewind-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rewind-mini-fill"></use>
                </svg>
                <div class="name">rewind-mini-fill</div>
                <div class="code-name">#icon-rewind-mini-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rhythm-fill"></use>
                </svg>
                <div class="name">rhythm-fill</div>
                <div class="code-name">#icon-rhythm-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-speaker-2-line"></use>
                </svg>
                <div class="name">speaker-2-line</div>
                <div class="code-name">#icon-speaker-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-speaker-3-line"></use>
                </svg>
                <div class="name">speaker-3-line</div>
                <div class="code-name">#icon-speaker-3-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-speed-mini-fill"></use>
                </svg>
                <div class="name">speed-mini-fill</div>
                <div class="code-name">#icon-speed-mini-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-speed-mini-line"></use>
                </svg>
                <div class="name">speed-mini-line</div>
                <div class="code-name">#icon-speed-mini-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-speed-line"></use>
                </svg>
                <div class="name">speed-line</div>
                <div class="code-name">#icon-speed-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stop-circle-fill"></use>
                </svg>
                <div class="name">stop-circle-fill</div>
                <div class="code-name">#icon-stop-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stop-circle-line"></use>
                </svg>
                <div class="name">stop-circle-line</div>
                <div class="code-name">#icon-stop-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stop-fill"></use>
                </svg>
                <div class="name">stop-fill</div>
                <div class="code-name">#icon-stop-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stop-line"></use>
                </svg>
                <div class="name">stop-line</div>
                <div class="code-name">#icon-stop-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stop-mini-line"></use>
                </svg>
                <div class="name">stop-mini-line</div>
                <div class="code-name">#icon-stop-mini-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stop-mini-fill"></use>
                </svg>
                <div class="name">stop-mini-fill</div>
                <div class="code-name">#icon-stop-mini-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video-fill"></use>
                </svg>
                <div class="name">video-fill</div>
                <div class="code-name">#icon-video-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video-line"></use>
                </svg>
                <div class="name">video-line</div>
                <div class="code-name">#icon-video-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vidicon-fill"></use>
                </svg>
                <div class="name">vidicon-fill</div>
                <div class="code-name">#icon-vidicon-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vidicon-line"></use>
                </svg>
                <div class="name">vidicon-line</div>
                <div class="code-name">#icon-vidicon-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-volume-down-line"></use>
                </svg>
                <div class="name">volume-down-line</div>
                <div class="code-name">#icon-volume-down-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-volume-mute-line"></use>
                </svg>
                <div class="name">volume-mute-line</div>
                <div class="code-name">#icon-volume-mute-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-volume-up-line"></use>
                </svg>
                <div class="name">volume-up-line</div>
                <div class="code-name">#icon-volume-up-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-leaf-line"></use>
                </svg>
                <div class="name">leaf-line</div>
                <div class="code-name">#icon-leaf-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-leaf-fill"></use>
                </svg>
                <div class="name">leaf-fill</div>
                <div class="code-name">#icon-leaf-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lightbulb-flash-line"></use>
                </svg>
                <div class="name">lightbulb-flash-line</div>
                <div class="code-name">#icon-lightbulb-flash-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lightbulb-line"></use>
                </svg>
                <div class="name">lightbulb-line</div>
                <div class="code-name">#icon-lightbulb-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plant-line"></use>
                </svg>
                <div class="name">plant-line</div>
                <div class="code-name">#icon-plant-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fridge-line"></use>
                </svg>
                <div class="name">fridge-line</div>
                <div class="code-name">#icon-fridge-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plug-2-line"></use>
                </svg>
                <div class="name">plug-2-line</div>
                <div class="code-name">#icon-plug-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reserved-line"></use>
                </svg>
                <div class="name">reserved-line</div>
                <div class="code-name">#icon-reserved-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-seedling-fill"></use>
                </svg>
                <div class="name">seedling-fill</div>
                <div class="code-name">#icon-seedling-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-seedling-line"></use>
                </svg>
                <div class="name">seedling-line</div>
                <div class="code-name">#icon-seedling-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-recycle-line"></use>
                </svg>
                <div class="name">recycle-line</div>
                <div class="code-name">#icon-recycle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-line"></use>
                </svg>
                <div class="name">add-line</div>
                <div class="code-name">#icon-add-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alert-line"></use>
                </svg>
                <div class="name">alert-line</div>
                <div class="code-name">#icon-alert-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alarm-warning-line"></use>
                </svg>
                <div class="name">alarm-warning-line</div>
                <div class="code-name">#icon-alarm-warning-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-apps-2-line"></use>
                </svg>
                <div class="name">apps-2-line</div>
                <div class="code-name">#icon-apps-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-apps-line"></use>
                </svg>
                <div class="name">apps-line</div>
                <div class="code-name">#icon-apps-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-double-line"></use>
                </svg>
                <div class="name">check-double-line</div>
                <div class="code-name">#icon-check-double-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-line"></use>
                </svg>
                <div class="name">check-line</div>
                <div class="code-name">#icon-check-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-error-warning-line"></use>
                </svg>
                <div class="name">error-warning-line</div>
                <div class="code-name">#icon-error-warning-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-external-link-fill"></use>
                </svg>
                <div class="name">external-link-fill</div>
                <div class="code-name">#icon-external-link-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-line"></use>
                </svg>
                <div class="name">eye-line</div>
                <div class="code-name">#icon-eye-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-close-line"></use>
                </svg>
                <div class="name">eye-close-line</div>
                <div class="code-name">#icon-eye-close-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings-4-line"></use>
                </svg>
                <div class="name">settings-4-line</div>
                <div class="code-name">#icon-settings-4-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-forward-line"></use>
                </svg>
                <div class="name">share-forward-line</div>
                <div class="code-name">#icon-share-forward-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-line"></use>
                </svg>
                <div class="name">share-line</div>
                <div class="code-name">#icon-share-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-flash-line"></use>
                </svg>
                <div class="name">shield-flash-line</div>
                <div class="code-name">#icon-shield-flash-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-line"></use>
                </svg>
                <div class="name">shield-line</div>
                <div class="code-name">#icon-shield-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-star-line"></use>
                </svg>
                <div class="name">shield-star-line</div>
                <div class="code-name">#icon-shield-star-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-fill"></use>
                </svg>
                <div class="name">star-fill</div>
                <div class="code-name">#icon-star-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-line"></use>
                </svg>
                <div class="name">star-line</div>
                <div class="code-name">#icon-star-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spam-line"></use>
                </svg>
                <div class="name">spam-line</div>
                <div class="code-name">#icon-spam-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time-line"></use>
                </svg>
                <div class="name">time-line</div>
                <div class="code-name">#icon-time-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timer-2-line"></use>
                </svg>
                <div class="name">timer-2-line</div>
                <div class="code-name">#icon-timer-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timer-flash-line"></use>
                </svg>
                <div class="name">timer-flash-line</div>
                <div class="code-name">#icon-timer-flash-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-toggle-line"></use>
                </svg>
                <div class="name">toggle-line</div>
                <div class="code-name">#icon-toggle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user-3-line"></use>
                </svg>
                <div class="name">user-3-line</div>
                <div class="code-name">#icon-user-3-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-blaze-line"></use>
                </svg>
                <div class="name">blaze-line</div>
                <div class="code-name">#icon-blaze-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-celsius-fill"></use>
                </svg>
                <div class="name">celsius-fill</div>
                <div class="code-name">#icon-celsius-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudy-2-line"></use>
                </svg>
                <div class="name">cloudy-2-line</div>
                <div class="code-name">#icon-cloudy-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudy-line"></use>
                </svg>
                <div class="name">cloudy-line</div>
                <div class="code-name">#icon-cloudy-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drizzle-line"></use>
                </svg>
                <div class="name">drizzle-line</div>
                <div class="code-name">#icon-drizzle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fire-line"></use>
                </svg>
                <div class="name">fire-line</div>
                <div class="code-name">#icon-fire-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-foggy-fill"></use>
                </svg>
                <div class="name">foggy-fill</div>
                <div class="code-name">#icon-foggy-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hail-line"></use>
                </svg>
                <div class="name">hail-line</div>
                <div class="code-name">#icon-hail-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-foggy-line"></use>
                </svg>
                <div class="name">foggy-line</div>
                <div class="code-name">#icon-foggy-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-haze-line"></use>
                </svg>
                <div class="name">haze-line</div>
                <div class="code-name">#icon-haze-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heavy-showers-line"></use>
                </svg>
                <div class="name">heavy-showers-line</div>
                <div class="code-name">#icon-heavy-showers-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mist-fill"></use>
                </svg>
                <div class="name">mist-fill</div>
                <div class="code-name">#icon-mist-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moon-clear-line"></use>
                </svg>
                <div class="name">moon-clear-line</div>
                <div class="code-name">#icon-moon-clear-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moon-cloudy-line"></use>
                </svg>
                <div class="name">moon-cloudy-line</div>
                <div class="code-name">#icon-moon-cloudy-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moon-foggy-line"></use>
                </svg>
                <div class="name">moon-foggy-line</div>
                <div class="code-name">#icon-moon-foggy-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rainy-line"></use>
                </svg>
                <div class="name">rainy-line</div>
                <div class="code-name">#icon-rainy-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rainbow-line"></use>
                </svg>
                <div class="name">rainbow-line</div>
                <div class="code-name">#icon-rainbow-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-showers-line"></use>
                </svg>
                <div class="name">showers-line</div>
                <div class="code-name">#icon-showers-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moon-line"></use>
                </svg>
                <div class="name">moon-line</div>
                <div class="code-name">#icon-moon-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-snowy-line"></use>
                </svg>
                <div class="name">snowy-line</div>
                <div class="code-name">#icon-snowy-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sun-cloudy-line"></use>
                </svg>
                <div class="name">sun-cloudy-line</div>
                <div class="code-name">#icon-sun-cloudy-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sun-foggy-line"></use>
                </svg>
                <div class="name">sun-foggy-line</div>
                <div class="code-name">#icon-sun-foggy-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sun-line"></use>
                </svg>
                <div class="name">sun-line</div>
                <div class="code-name">#icon-sun-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-temp-cold-line"></use>
                </svg>
                <div class="name">temp-cold-line</div>
                <div class="code-name">#icon-temp-cold-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-temp-hot-line"></use>
                </svg>
                <div class="name">temp-hot-line</div>
                <div class="code-name">#icon-temp-hot-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thunderstorms-line"></use>
                </svg>
                <div class="name">thunderstorms-line</div>
                <div class="code-name">#icon-thunderstorms-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-typhoon-line"></use>
                </svg>
                <div class="name">typhoon-line</div>
                <div class="code-name">#icon-typhoon-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-windy-fill"></use>
                </svg>
                <div class="name">windy-fill</div>
                <div class="code-name">#icon-windy-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-meteor-line"></use>
                </svg>
                <div class="name">meteor-line</div>
                <div class="code-name">#icon-meteor-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bangsi"></use>
                </svg>
                <div class="name">bangsi</div>
                <div class="code-name">#icon-bangsi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-building-2-line"></use>
                </svg>
                <div class="name">building-2-line</div>
                <div class="code-name">#icon-building-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home-2-line"></use>
                </svg>
                <div class="name">home-2-line</div>
                <div class="code-name">#icon-home-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-archive-drawer-fill"></use>
                </svg>
                <div class="name">archive-drawer-fill</div>
                <div class="code-name">#icon-archive-drawer-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bubble-chart-line"></use>
                </svg>
                <div class="name">bubble-chart-line</div>
                <div class="code-name">#icon-bubble-chart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-customer-service-line"></use>
                </svg>
                <div class="name">customer-service-line</div>
                <div class="code-name">#icon-customer-service-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flag-2-line"></use>
                </svg>
                <div class="name">flag-2-line</div>
                <div class="code-name">#icon-flag-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-line-chart-line"></use>
                </svg>
                <div class="name">line-chart-line</div>
                <div class="code-name">#icon-line-chart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pie-chart-2-line"></use>
                </svg>
                <div class="name">pie-chart-2-line</div>
                <div class="code-name">#icon-pie-chart-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-send-plane-fill"></use>
                </svg>
                <div class="name">send-plane-fill</div>
                <div class="code-name">#icon-send-plane-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message-3-line"></use>
                </svg>
                <div class="name">message-3-line</div>
                <div class="code-name">#icon-message-3-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-collage-line"></use>
                </svg>
                <div class="name">collage-line</div>
                <div class="code-name">#icon-collage-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drag-drop-line"></use>
                </svg>
                <div class="name">drag-drop-line</div>
                <div class="code-name">#icon-drag-drop-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-grid-line"></use>
                </svg>
                <div class="name">grid-line</div>
                <div class="code-name">#icon-grid-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hammer-line"></use>
                </svg>
                <div class="name">hammer-line</div>
                <div class="code-name">#icon-hammer-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-grid-fill"></use>
                </svg>
                <div class="name">grid-fill</div>
                <div class="code-name">#icon-grid-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layout-masonry-line"></use>
                </svg>
                <div class="name">layout-masonry-line</div>
                <div class="code-name">#icon-layout-masonry-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-palette-line"></use>
                </svg>
                <div class="name">palette-line</div>
                <div class="code-name">#icon-palette-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pencil-line"></use>
                </svg>
                <div class="name">pencil-line</div>
                <div class="code-name">#icon-pencil-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pencil-ruler-2-line"></use>
                </svg>
                <div class="name">pencil-ruler-2-line</div>
                <div class="code-name">#icon-pencil-ruler-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-terminal-window-line"></use>
                </svg>
                <div class="name">terminal-window-line</div>
                <div class="code-name">#icon-terminal-window-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-battery-charge-line"></use>
                </svg>
                <div class="name">battery-charge-line</div>
                <div class="code-name">#icon-battery-charge-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-battery-low-line"></use>
                </svg>
                <div class="name">battery-low-line</div>
                <div class="code-name">#icon-battery-low-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bluetooth-line"></use>
                </svg>
                <div class="name">bluetooth-line</div>
                <div class="code-name">#icon-bluetooth-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bluetooth-connect-line"></use>
                </svg>
                <div class="name">bluetooth-connect-line</div>
                <div class="code-name">#icon-bluetooth-connect-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-computer-line"></use>
                </svg>
                <div class="name">computer-line</div>
                <div class="code-name">#icon-computer-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cpu-line"></use>
                </svg>
                <div class="name">cpu-line</div>
                <div class="code-name">#icon-cpu-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dashboard-3-line"></use>
                </svg>
                <div class="name">dashboard-3-line</div>
                <div class="code-name">#icon-dashboard-3-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gps-line"></use>
                </svg>
                <div class="name">gps-line</div>
                <div class="code-name">#icon-gps-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hard-drive-2-line"></use>
                </svg>
                <div class="name">hard-drive-2-line</div>
                <div class="code-name">#icon-hard-drive-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fingerprint-2-line"></use>
                </svg>
                <div class="name">fingerprint-2-line</div>
                <div class="code-name">#icon-fingerprint-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-install-line"></use>
                </svg>
                <div class="name">install-line</div>
                <div class="code-name">#icon-install-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-install-fill"></use>
                </svg>
                <div class="name">install-fill</div>
                <div class="code-name">#icon-install-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-macbook-line"></use>
                </svg>
                <div class="name">macbook-line</div>
                <div class="code-name">#icon-macbook-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qr-code-line"></use>
                </svg>
                <div class="name">qr-code-line</div>
                <div class="code-name">#icon-qr-code-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone-line"></use>
                </svg>
                <div class="name">phone-line</div>
                <div class="code-name">#icon-phone-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qr-scan-2-line"></use>
                </svg>
                <div class="name">qr-scan-2-line</div>
                <div class="code-name">#icon-qr-scan-2-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radar-line"></use>
                </svg>
                <div class="name">radar-line</div>
                <div class="code-name">#icon-radar-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-battery-line"></use>
                </svg>
                <div class="name">battery-line</div>
                <div class="code-name">#icon-battery-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remote-control-line"></use>
                </svg>
                <div class="name">remote-control-line</div>
                <div class="code-name">#icon-remote-control-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-restart-line"></use>
                </svg>
                <div class="name">restart-line</div>
                <div class="code-name">#icon-restart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-router-line"></use>
                </svg>
                <div class="name">router-line</div>
                <div class="code-name">#icon-router-line</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
